<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta name="referrer" content="no-referrer"/>
    <link rel="icon" th:href="@{/images/logo.png}" type="image/x-icon"/>
    <title>登录</title>
    <!-- jquery -->
    <script src="//lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">


    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>

    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">

    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>

    <script th:src="@{/js/common.js}"></script>

    <!--    md5加密-->
    <script src="http://cdn.bootcss.com/blueimp-md5/1.1.0/js/md5.min.js"></script>


    <style>
        .row {
            margin-top: -40px
        }

        .container-fluid {
            padding-top: 36px;
            margin-top: 37px;
            margin-left: 22px;
            margin-right: 22px;
            padding-bottom: 10px;
            background-color: white;
            margin-bottom: 37px;
            margin-top: 1px;
        }

        body {
            background-color: #F7F6F7;
        }

    </style>

</head>

<body>

<!--主体-->
<div class="container-fluid" style="margin-top: 28px;">
    <div class="row" style="margin-top: 430px;">
        <div style="width: 35%;margin-left: 537px;margin-top: -261px;">
            <form class="form-horizontal">
                <div class="form-group">
                    <label for="stuSn" class="col-sm-2 control-label">学号</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="stuSn" placeholder="输入学号"
                               style="width: 234px;">
                    </div>

                </div>
                <div class="form-group">
                    <label for="password" class="col-sm-2 control-label">密码</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" id="password" placeholder="输入密码"
                               style="width: 234px;">
                    </div>
                </div>

                <div class="form-group">
                    <label for="verifyCode" class="col-sm-2 control-label">
                        <img th:src="@{/captcha}" id="code" width="130px" height="48px"
                             style="margin-left: 200px;margin-top: -15px;" onclick="refreshCode()"/>
                    </label>

                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="verifyCode" placeholder="验证码"
                               style="width: 96px;">
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <label type="button" onclick="login()" class="btn btn-default">登录</label>
                    </div>
                </div>
            </form>
        </div>
        <div style="margin-top: 302px">

        </div>
    </div>
</div>
</body>

<script>

    document.addEventListener('keydown', function (e) {
        if (e.key === 'Enter') {
            login()
        }
    })

    function login() {

        var loading = layer.load(0, {
            shade: false,
            time: 2 * 1000
        });

        var stuSn = $("#stuSn").val()
        var password = $("#password").val()
        var verifyCode = $("#verifyCode").val()

        $.post(
            CONTEXT_PATH_DEV + "/doLogin",
            {
                stuSn: stuSn,
                password: password === "" ? "" : md5(SALT.charAt(1) + SALT.charAt(6) + password + SALT.charAt(4) + SALT.charAt(9)),
                verifyCode: verifyCode
            },
            function (data) {
                layer.close(loading);

                layer.msg(data.msg);
                if (data.code === 1) {
                    refreshCode()
                }
                if (data.code === 0) {
                    setTimeout(function () {
                        location.href = CONTEXT_PATH_DEV + "/index"
                    }, 500)
                }
            }
        )
    }



    function refreshCode() {
        $.get(
            CONTEXT_PATH_DEV + "/captcha",
            function () {
                $("#code").attr("src", CONTEXT_PATH_DEV + "/captcha?flag=" + Math.random());
            }
        )
    }
</script>
</html>
